<template>
  <div class="form-element">
    <counter></counter>
    <h2>{{ state.title }}</h2>
    <input type="text" v-model="state.username" placeholder="Username" />

    <input type="password" v-model="state.password" placeholder="Password" />

    <button @click="login">Submit</button>
    <p>Values: {{ state.username + " " + state.password }}</p>
  </div>
</template>

<script>
import { reactive, onMounted, computed } from "vue";
import Counter from "../components/Counter";
export default {
  name: "About",
  components: { Counter },
  props: {
    title: String,
  },
  setup(props, { emit }) {
    const state = reactive({
      username: "",
      password: "",
      lowerCaseUsername: computed(() => state.username.toLowerCase()),
    });

    const login = () => {
      emit("login", {
        username: state.username,
        password: state.password,
      });
    };

    onMounted(() => {
      console.log("组件已挂载");
    });

    return {
      login,
      state,
    };
  },
};
</script>
